<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 style="text-align: center">员工出差管理系统</h1>
<form method="get" action="list" style="text-align: center">
    <select style="margin-left: 80px" name="tripModeId" id="tripModeSelect">
        <option value="0">——请选择——</option>
<span th:each=" tripMode: *{tripModeList}">
          <option th:value="${tripMode.id}" th:text="${tripMode.name}"></option>
</span>

    </select>
    <input type="submit" value="查询" onclick="submitFormWithSelectedTripModeId()"/>
    <a th:href="@{/toAdd}">新增</a>
<!--    <input style="margin-left: 130px" type="button" onclick="location.href='toAdd'"-->
<!--           value="添加">-->
</form>

<table border="1" cellspacing="0" style="margin-left: 35%">
    <tr id="tr" style="text-align: center">
        <td>出差人员</td>
        <td>职位</td>
        <td>出行方式</td>
        <td>出行日期</td>
        <td>行程状态</td>
        <td>操作</td>
    </tr>

    <tr th:each="schedule : ${list}">
        <td th:text="${schedule.userName}"></td>
        <td th:text="${schedule.duty}"></td>
        <td>
            <span th:each="tripMode : ${tripModeList}" th:if="${tripMode.id == schedule.tripModeId}" th:text="${tripMode.name}"></span>
        </td>
        <td th:text="${#dates.format(schedule.departTime,'yyyy-MM-dd HH:mm:ss')}"></td>
        <td>
            <span th:text="${schedule.status} == 0 ? '未出行' : '已取消'"></span>
        </td>
        <td>
            <a th:if="${schedule.status == 0}" href="javascript:void(0)"
               th:onclick="|updateCancel(${schedule.id},${schedule.status})|">取消行程</a>
            <span th:if="${schedule.status == 1}">已取消</span>
        </td>
        <!--
        <td>
            <span th:if="${schedule.status == 0}">
                <a href="javascript:void(0)" onclick="updateCancel(${schedule.id}, ${schedule.status})">取消行程</a>
            </span>
            <span th:if="${schedule.status == 1}">已取消</span>
        </td>
        -->
    </tr>

</table>

<p style="text-align: center">
    <a th:href="@{/list(pageNo=1)}">首页</a>
    <a th:href="@{/list(pageNo=${pageNo-1})}">上一页</a>
    <a th:href="@{/list(pageNo=${pageNo+1})}">下一页</a>

    <a th:href="@{/list(pageNo=${totalPages})}">末页</a>
    共有<span th:text=" ${totalCount}"> 条数据</span>

</p>

<script src="/js/jquery.js"></script>
<script>

    $(function () {
        $("tr:odd").css("background-color", "green")
        $("tr:even").css("background-color", "grey")
    })

    function updateCancel(id, status) {

        if (confirm("请确认是否取消该行程？")) {
            location = "update?id=" + id + "&status=" + status;
        }
    }

    function submitFormWithSelectedTripModeId() {
        var tripModeId = document.getElementById('tripModeSelect').value;
        location.href = '/list' + '?tripModeId=' + tripModeId;}
</script>

</body>
</html>
